<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Mitagen HTML5 Template</title>

    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!-- stylesheets -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/custom-animation.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/bootstrap-v4.1.3.min.css">
    <link rel="stylesheet" href="assets/css/spacing.min.css">
    <link rel="stylesheet" href="assets/css/mainmenu.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">

</head>

<body>

    <div class="page-wrapper">

        <!-- Preloader -->
        <div class="preloader"></div>

        <!--==================================================================== 
                            Start header area
    =====================================================================-->

        <header class="main-header">

            <!--Header-Upper-->
            <div class="header-upper">
                <div class="container-fluid clearfix">

                    <div class="header-inner clearfix">
                        <div class="logo-outer">
                            <div class="logo"><a href="index.html"><img src="assets/img/logo.png" alt="" title=""></a></div>
                        </div>

                        <!-- Main Menu -->
                        <nav class="main-menu navbar-expand-lg ml-md-auto">
                            <div class="navbar-header clearfix">
                                <div class="logo"><a href="index.html"><img src="assets/img/logo.png" alt="" title=""></a></div>
                                <!-- Toggle Button -->
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-one">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>

                            <div class="navbar-collapse navbar-collapse-one collapse clearfix">
                                <ul class="navigation clearfix">
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="services.html">services</a></li>
                                    <li class="dropdown"><a href="#">pages</a>
                                        <ul>
                                            <li><a href="gallery.html">Gallery</a></li>
                                            <li><a href="pricing.html">Pricing</a></li>
                                            <li><a href="team.html">Team</a></li>
                                            <li><a href="404.html">404</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown current"><a href="#">blog</a>
                                        <ul>
                                            <li><a href="blog-grid.html">Blog Grid</a></li>
                                            <li><a href="blog-classic.html">Blog Classic</a></li>
                                            <li><a href="blog-details.html">Blog Details</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="contact.html">contact</a></li>
                                </ul>
                            </div>
                        </nav>
                        <!-- Main Menu End-->

                        <!-- Menu buttons-->
                        <div class="menu-button ml-55">
                            <a href="#" class="theme-btn">Start Project</a>
                        </div>
                    </div>

                </div>
            </div>
            <!--End Header Upper-->

        </header>

        <!--==================================================================== 
                            End header area
    =====================================================================-->


        <!--==================================================================== 
            Start Banner Section
        =====================================================================-->
        <section class="banner-section rel">
            <div class="container">
                <h2 class="page-title">Blog Details</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Blog Details</li>
                    </ol>
                </nav>
                
                <div class="shape shapeAnimationOne l-10 t-60">
                    <img src="assets/img/shapes/shape1.png" alt="Shape">
                </div>
                <div class="shape shapeAnimationTwo l-70 t-60">
                    <img src="assets/img/shapes/shape2.png" alt="Shape">
                </div>
                <div class="shape shapeAnimationThree l-50 t-100">
                    <img src="assets/img/shapes/shape3.png" alt="Shape">
                </div>
            </div>
        </section>
        <!--==================================================================== 
            End Banner Section
        =====================================================================-->
        <!--==================================================================== 
							End banner section
	=====================================================================-->


        <!--==================================================================== 
                            Start Blog Details Page section
    =====================================================================-->
        <section class="blog-details-page pt-125 pb-120">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="blog-item">
                            <div class="blog-img">
                                <img src="assets/img/blog/blog-details.png" alt="Blog Image">
                            </div>
                            <div class="name-date">
                                <span class="name">By: Willum Muzad</span>
                                <span class="date">August 11, 2020</span>
                            </div>
                            <div class="blog-content">
                                <h3>Product Design Sprint Process, A Complete Guide to Start</h3>
                                <p>Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem.</p>
                                <p>Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.</p>
                                <blockquote>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem.</blockquote>
                                <p>Consectetur adipisicing elitsed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla paria tur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> Amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.</p>
                                <div class="tag-share mt-45">
                                    <div class="tags">
                                        <span>Tags: </span>
                                        <a href="#">SEO</a>
                                        <a href="#">Ui/UX</a>
                                    </div>
                                    <div class="share">
                                        <div class="social-link-icon">
                                            <span>Share: </span>
                                            <a href="#"><i class="fa fa-facebook-f"></i></a>
                                            <a href="#"><i class="fa fa-instagram"></i></a>
                                            <a href="#"><i class="fa fa-twitter"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="post-comments">
                            <div class="comment-title mt-50 mb-30">
                                <h3>Three Comments</h3>
                            </div>

                            <div class="latest-comments mb-65">
                                <div class="comments-box">
                                    <div class="comments-avatar">
                                        <img src="assets/img/blog/comment-1.png" alt="">
                                    </div>
                                    <div class="comments-text">
                                        <p>Consectetur adipisicing elitsed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
                                        <div class="avatar-name">
                                            <a class="reply" href="#">Reply</a>
                                            <h5>Fahima Sarra</h5>
                                            <span>Sep 08, 2020</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="child comments-box ml-50">
                                    <div class="comments-avatar">
                                        <img src="assets/img/blog/comment-2.png" alt="">
                                    </div>
                                    <div class="comments-text">
                                        <p>Consectetur adipisicing elitsed do eiusmod tempor incididunt</p>
                                        <div class="avatar-name">
                                            <a class="reply" href="#">Reply</a>
                                            <h5>Robert Pitu</h5>
                                            <span>Sep 08, 2020</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="child comments-box ml-100">
                                    <div class="comments-avatar">
                                        <img src="assets/img/blog/comment-3.png" alt="">
                                    </div>
                                    <div class="comments-text">
                                        <p>Consectetur adipisicing elitsed do eiusmod tempor incididunt</p>
                                        <div class="avatar-name">
                                            <a class="reply" href="#">Reply</a>
                                            <h5>Sanzida Akon</h5>
                                            <span>Sep 08, 2020</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="latest-comments admin-comment">
                                <div class="comments-box">
                                    <div class="comments-avatar">
                                        <img src="assets/img/blog/admin-avatar.png" alt="">
                                    </div>
                                    <div class="comments-text">
                                        <div class="avatar-name">
                                            <h5>Admin</h5>
                                            <span>Sep 08, 2020</span>
                                            <a class="reply" href="#">Reply</a>
                                        </div>
                                        <p>Consectetur adipisicing elitsed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="comment-title mt-50 mb-30">
                            <h3>Leave A Comment</h3>
                        </div>

                        <div class="comment-form">
                            <form action="#">
                                <div class="row clearfix">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" name="full_name" id="full_name" class="form-control" value="" required="" placeholder="Your Name*">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="email" name="email" id="email" class="form-control" value="" required="" placeholder="Email*">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <textarea name="comment" id="comment" class="form-control" rows="3" required="" placeholder="Comment...."></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit" class="theme-btn">Post Comment</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                    <div class="col-lg-4">
                        <div class="blog-sidebar ml-10 rml-0 rmt-50">
                            <div class="widget widget_search">
                                <form action="#" _lpchecked="1">
                                    <input type="text" placeholder="Search...." required="">
                                    <button type="submit"><i class="flaticon-search"></i></button>
                                </form>
                            </div>
                            <div class="widget widget_category">
                                <h4 class="widget-title">Categories</h4>
                                <ul>
                                    <li><a href="#">Web Development <span>(11)</span></a></li>
                                    <li><a href="#">Ui/UX Design <span>(8)</span></a></li>
                                    <li><a href="#">Search Optimization <span>(2)</span></a></li>
                                    <li><a href="#">Web Design <span>(10)</span></a></li>
                                    <li><a href="#">Wireframing Task <span>(17)</span></a></li>
                                </ul>
                            </div>
                            <div class="widget widget_news">
                                <h4 class="widget-title">Recent Posts</h4>
                                <div class="widget-popular-post">
                                    <div class="widget-post-item">
                                        <div class="widget-post-image">
                                            <img src="assets/img/blog/widget-1.png" alt="News Widget">
                                        </div>
                                        <div class="widget-post-content">
                                            <span class="date">Jun 05, 2020</span>
                                            <h6><a href="#">Everything You Need to Know About Cyber Warfare</a></h6>
                                        </div>
                                    </div>
                                    <div class="widget-post-item">
                                        <div class="widget-post-image">
                                            <img src="assets/img/blog/widget-2.png" alt="News Widget">
                                        </div>
                                        <div class="widget-post-content">
                                            <span class="date">Jun 05, 2020</span>
                                            <h6><a href="#">Everything You Need to Know About Cyber Warfare</a></h6>
                                        </div>
                                    </div>
                                    <div class="widget-post-item">
                                        <div class="widget-post-image">
                                            <img src="assets/img/blog/widget-3.png" alt="News Widget">
                                        </div>
                                        <div class="widget-post-content">
                                            <span class="date">Jun 05, 2020</span>
                                            <h6><a href="#">Everything You Need to Know About Cyber Warfare</a></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="widget widget_tag">
                                <h4 class="widget-title">Tags</h4>
                                <div class="tags">
                                    <a href="#">SEO</a>
                                    <a href="#">Marketing</a>
                                    <a href="#">Ui/UX</a>
                                    <a href="#">Design</a>
                                    <a href="#">Development</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </section>
        <!--==================================================================== 
                            End Blog Details Page section
    =====================================================================-->


 <!--==================================================================== 
                            Start Call For Action section
    =====================================================================-->
       <section class="call-for-action text-center">
           <div class="container">
               <div class="call-action-content">
                   <h2>Have any question about us?</h2>
                   <p> Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat.</p>
                   <a href="contant.html" class="theme-btn">Please Contact</a>
               </div>
           </div>
       </section>
        <!--==================================================================== 
							End Call For Action section
	=====================================================================-->



        <!--==================================================================== 
                            Start footer section
    =====================================================================-->
        <footer class="footer-section mt-125 pt-100">
            <div class="container">

                <div class="row">

                    <!--big column-->
                    <div class="col-lg-7">
                        <div class="row">

                            <!--Footer Column-->
                            <div class="col-sm-7">
                                <div class="footer-widget logo-widget mr-35">
                                    <div class="footer-logo"><a href="index.html"><img src="assets/img/logo.png" alt="logo"></a></div>
                                    <div class="widget-content">
                                        <div class="text">
                                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                        </div>
                                        <div class="footer-social-icon mt-35">
                                            <div class="social-link-icon">
                                                <a href="#"><i class="fa fa-facebook-f"></i></a>
                                                <a href="#"><i class="fa fa-twitter"></i></a>
                                                <a href="#"><i class="fa fa-skype"></i></a>
                                                <a href="#"><i class="fa fa-instagram"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--Footer Column-->
                            <div class="col-sm-5">
                                <div class="footer-widget links-widget">
                                    <h4 class="footer-title">Usefull Links</h4>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">About Us</a></li>
                                            <li><a href="#">Services</a></li>
                                            <li><a href="#">Project</a></li>
                                            <li><a href="#">Blog</a></li>
                                            <li><a href="#">Contact</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--big column-->
                    <div class="col-lg-5">
                        <div class="row">

                            <!--Footer Column-->
                            <div class="col-sm-5">
                                <div class="footer-widget links-widget">
                                    <h4 class="footer-title">Services</h4>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">Search Optimization</a></li>
                                            <li><a href="#">Wireframing Task</a></li>
                                            <li><a href="#">Market Analysis</a></li>
                                            <li><a href="#">Web Development</a></li>
                                            <li><a href="#">Web Design</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!--Footer Column-->
                            <div class="col-sm-7">
                                <div class="footer-widget info-widget">
                                    <h4 class="footer-title">Contact</h4>
                                    <div class="office-info">
                                        <ul>
                                            <li><i class="flaticon-home"></i>1301 Hoffman Avenue, Brooklyn New York, <br>NY-11206</li>
                                            <li><i class="flaticon-telephone"></i>+1 (012) 345-6789 <br>
                                            +1 (123) 456-7899</li>
                                            <li><i class="flaticon-email"></i>info@yourmail.com</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--Copyright-->
            <div class="footer-bottom">
                <div class="copyright">Copyright @2020 M_Themes All rights reserved</div>
            </div>

        </footer>


        <!--==================================================================== 
                            End footer section
    =====================================================================-->

        <!-- Scroll Top Button -->
        <button class="scroll-top scroll-to-target" data-target="html">
            <span class="fa fa-angle-up"></span>
        </button>

    </div>



    <!--====================================================================
                            Include All Js File 
     ====================================================================-->
    <!-- All Plugins -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/bootstrap-v4.1.3.min.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/jquery.countTo.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/appear.js"></script>
    <script src="assets/js/main.js"></script>

</body>

</html>
